<template>
  <view class="box position-relative">
    <view v-if="!userInfo.mobile" class="position-absolute left-0 top-0" style="width: 100%; height: 90%;z-index: 9999;"
      @click="login.open()"></view>
    <view class="myBg" :style="{ backgroundImage: `url('${ASSETSURL}myBg.png')` }">
      <uv-navbar placeholder title="个人中心" bgColor="transparent" leftIcon=" " :autoBack="true"></uv-navbar>
      <view class="flex m-t-70 m-l-50 m-r-38">
        <view>
          <uv-avatar :src="userInfo.avatar" shape="circle" size="142rpx"></uv-avatar>
        </view>
        <view class="m-l-20">
          <view class="font-36 font-weight-bold m-t-20">{{ userInfo.nickname || '暂无昵称' }}</view>
          <view class="flex align-ali m-t-10">
            <view class="font-24">积分：</view>
            <view class="font-28 font-weight-bold text-840202">{{ userInfo.score || 0 }}</view>
          </view>
        </view>
        <view class="iconBianJi m-t-20" @click="route('/pagesA/pages/originality/userInformation')">
          <uv-image :src="ASSETSURL + 'bianJi.png'" width="99rpx" height="41rpx"></uv-image>
        </view>
      </view>
      <view class="flex justify-bet m-t-54 m-x-96">
        <view class="texttile flex-col align-ali justify-cen" @click="route('/pagesA/pages/myDesign/myDesign')">
          <view class="font-42 font-w-b">
            {{ userInfo.my_diy || 0 }}
          </view>
          <view class="m-t-6 font-28">我的设计</view>
        </view>
        <view class="texttile flex-col   align-ali justify-cen"
          @click="route('/pagesA/pages/myCollection/myCollection')">
          <view class="font-42 font-w-b">
            {{ userInfo.my_collect || 0 }}
          </view>
          <view class="m-t-6 font-28">我的收藏</view>
        </view>
        <view class="texttile flex-col align-ali justify-cen" @click="goPages('/packageOrder/shopCar/shopCar')">
          <view class="font-42 font-w-b">
            {{ userInfo.cart_count || 0 }}
          </view>
          <view class="m-t-6 font-28">购物车</view>
        </view>
      </view>
      <view class="dingdan m-t-28 p-x-30 p-t-25 p-b-32 m-x-38">
        <view class="flex justify-between align-ali">
          <view class="dingdan-title font-34 font-w-b text-1E1E1E m-l-18 position-relative">
            订单
          </view>
          <view class="font-22 text-greey flex align-ali"
            @click="route(`/pagesA/pages/originality/myOrder`, { id: 0 });">
            查看全部
            <uv-icon name="arrow-right" color="#999999" size="22rpx"></uv-icon>
          </view>
        </view>
        <view class="flex justify-between p-x-16 m-t-26" style="white-space: nowrap;">
          <view v-for="(item, index) in FormData.sendList" :key="index" class="flex-col align-ali justify-cen"
            @click="getRoute(item)" style="width: 106rpx;">
            <view class="position-relative">
              <uv-image :src="ASSETSURL + item.icon" width="76rpx" height="76rpx"></uv-image>
              <view class="badge position-absolute">
                <uv-badge absolute bgColor="#BD0001" :offset="[0, 0]" type="error" max="99" :value="item.num"
                  :customStyle="{
                    border: '2rpx solid #fff'
                  }"></uv-badge>
              </view>
            </view>
            <view class="m-t-5 font-24">{{ item.name }}</view>
          </view>
        </view>
      </view>
      <view class="dingdan m-t-28 p-x-30 p-y-25  m-x-38">
        <view class="flex justify-between align-ali">
          <view class="dingdan-title font-34 font-w-b text-1E1E1E m-l-12 position-relative">
            服务
          </view>
        </view>
        <!-- <view class="flex-wra m-t-40" style="gap: 54rpx 0rpx"> -->
        <view class="flex-wra m-t-40 m-x-14 flex-bet">
          <block v-for="(item, index) in FormData.myList.slice(0, 4)" :key="index">
            <button @click="goPages(item.path)" :open-type="item.id == 7 ? 'contact' : ''" hover-class="none"
              class="flex-col-ali" style="width: 106rpx;">
              <uv-image :src="ASSETSURL + item.icon + '?id=v1.0'" width="54rpx" height="54rpx"></uv-image>
              <view class="font-26 m-t-12">{{ item.name }}</view>
            </button>
          </block>
        </view>
        <view class="flex-wra m-t-54 flex-bet m-x-14">
          <block v-for="(item, index) in FormData.myList.slice(4, 8)" :key="index">
            <button @click="goPages(item.path)" :open-type="item.id == 7 ? 'contact' : ''" hover-class="none"
              class="flex-col-ali" style="width: 106rpx;">
              <uv-image :src="ASSETSURL + item.icon + '?id=v1.0'" width="54rpx" height="54rpx"></uv-image>
              <view class="font-26 m-t-12">{{ item.name }}</view>
            </button>
          </block>

        </view>
      </view>

      <view class="" v-if="false">
        <view class="send m-t-30 p-y-30 p-x-30">
          <view class="flex justify-between align-ali">
            <view class="font-28 ">
              全部订单
            </view>
            <view class="font-22 text-greey flex align-ali"
              @click="route(`/pagesA/pages/originality/myOrder`, { id: 0 });">
              查看全部
              <uv-icon name="arrow-right" color="#999999" size="22rpx"></uv-icon>
            </view>
          </view>
          <view class="flex justify-between p-x-16 m-t-26">
            <view v-for="(item, index) in FormData.sendList" :key="index" class="flex-col align-ali justify-cen"
              @click="getRoute(item)">
              <view class="position-relative">
                <uv-image :src="ASSETSURL + item.icon" width="76rpx" height="76rpx"></uv-image>
                <view class="badge position-absolute">
                  <uv-badge absolute bgColor="#BD0001" :offset="[0, 0]" type="error" max="99"
                    :value="item.num"></uv-badge>
                </view>
              </view>
              <view class="m-t-5 font-24">{{ item.name }}</view>
            </view>
          </view>
        </view>
        <view class="myCard m-t-20 p-32 flex justify-between align-ali">
          <view class="flex" @click="route('/pagesA/pages/myDesign/myDesign')">
            <view class="icon flex justify-cen align-ali">
              <uv-image :src="ASSETSURL + 'myDesign.png'" width="66rpx" height="66rpx"></uv-image>
            </view>
            <view class="m-l-20">
              <view class="font-32 flex align-ali">
                我的设计
                <uv-icon class="m-t-8 m-l-5" name="arrow-right" size="22rpx"></uv-icon>
              </view>
              <view class="font-24 m-t-10 text-greey">个人设计的产品</view>
            </view>
          </view>
          <view class="flex">
            <view class="icon flex justify-cen align-ali position-relative">
              <uv-image :src="ASSETSURL + 'myCart.png'" width="66rpx" height="66rpx"></uv-image>
              <view class="badge position-absolute">
                <uv-badge absolute bgColor="#BD0001" :offset="[0, 0]" type="error" max="99"
                  :value="userInfo.cart_count"></uv-badge>
              </view>
            </view>
            <view class="m-l-20" @click="goPages('/packageOrder/shopCar/shopCar')">
              <view class="font-32 flex align-ali">
                购物车
                <uv-icon class="m-t-8 m-l-5" name="arrow-right" size="22rpx"></uv-icon>
              </view>
              <view class="font-24 m-t-10 text-greey">已加购物车商品</view>
            </view>
          </view>
        </view>
        <view class="p-x-32 p-y-48 m-t-20  myList flex-wra" style="row-gap: 38rpx">
          <block v-for="(item, index) in FormData.myList" :key="index">
            <button @click="goPages(item.path)" :open-type="item.id == 7 ? 'contact' : ''" hover-class="none"
              class="flex-col-ali" style="width: 33.33%">
              <uv-image :src="ASSETSURL + item.icon + '?id=v1.0'" width="70rpx" mode="widthFix"></uv-image>
              <view class="font-30">{{ item.name }}</view>
            </button>
          </block>
        </view>
      </view>
    </view>

    <view class=""></view>
    <tabbar :number="number"></tabbar>
    <dy-login ref="login"></dy-login>
  </view>
</template>

<script setup>
import { userDetail } from '@/api/api';
import { ref, onMounted, reactive } from 'vue';
import { onReachBottom, onShow, onReady, onLoad } from '@dcloudio/uni-app';
import { useCounter } from '@/mixins/userHooks';
const { getUserInfo, userInfo, isLogin, tool } = useCounter();
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
const number = ref(4);
const login = ref(null);
const usrinfo = ref({});
const FormData = reactive({
  sendList: [
    {
      name: '待发货',
      icon: 'send_01.png',
      num: 0,
      id: 1
    },
    {
      name: '待收货',
      icon: 'send_02.png',
      num: 0,
      id: 2
    },
    {
      name: '已完成',
      icon: 'send_03.png',
      num: 0,
      id: 3
    },
    {
      name: '退货/售后',
      icon: 'send_04.png',
      num: 0,
      id: 4
    }
  ],
  myList: [
    {
      name: '我的积分',
      icon: 'myList_01.png',
      path: '/pagesA/pages/myDesign/myPoints',
      id: 1
    },
    {
      name: '优惠券',
      icon: 'myList_04.png',
      path: '/pagesA/pages/myDesign/coupon',
      id: 2
    },
    // {
    //   name: '我的收藏',
    //   icon: 'myList_07.png',
    //   path: '/pagesA/pages/myCollection/myCollection',
    //   id: 5
    // },
    {
      name: '地址管理',
      icon: 'myList_02.png',
      path: '/pagesA/pages/address/address',
      id: 4
    },
    {
      name: '反馈建议',
      icon: 'myList_05.png',
      path: '/pagesA/feedback/feedback',
      id: 5
    },
    {
      name: '常见问题',
      icon: 'myList_08.png',
      path: '/pagesA/pages/myCollection/problem',
      id: 6
    },
    {
      name: '联系我们',
      icon: 'myList_09.png',
      id: 7
    },
    {
      name: '关于我们',
      icon: 'myList_03.png',
      path: '/pagesA/aboutUs/aboutUs',
      id: 5
    },
    {
      name: '门店地址',
      icon: 'myList_06.png',
      path: '/pagesA/address/address',
      id: 5
    },

  ]
});
//跳转代发货等
const getRoute = (e) => {
  if (e.name == '退货/售后') {
    route(`/pagesA/pages/originality/myOrders`, {
      id: 0
    });
  } else {
    route(`/pagesA/pages/originality/myOrder`, {
      id: e.id
    });
  }
};
const handleLoginSuccess = (e) => {
  console.log(e, '登录--------成功');
};
const goPages = (e) => {
  // console.log(e, isLogin.value, '123')
  uni.navigateTo({
    url: e
  });
};
 
onShow(async () => {
  await getUserInfo();
  const { pending_delivery, pending_receive, completed, refund } = userInfo.value.order_count;
  [pending_delivery, pending_receive, completed, refund].forEach((num, index) => {
    FormData.sendList[index].num = num;
  });
});
</script>

<style lang="scss" scoped>
.box {
  min-height: 100vh;
  background: #f6f6f6;
  padding-bottom: 100rpx;
  overflow-y: auto;
}

.myBg {
  // height: 619rpx;
  background-size: 100% 100%;

  .iconBianJi {
    margin-left: auto;
  }

  .send {
    width: 674rpx;
    // height: 184rpx;
    background: #fff;
    border-radius: 12rpx;

    .badge {
      top: 0rpx;
      right: 0rpx;
    }
  }

  .myCard {
    width: 674rpx;
    height: 162rpx;
    background: #fff;
    border-radius: 12rpx;

    .icon {
      width: 98rpx;
      height: 98rpx;
      background: #f4f4f4;
      border-radius: 12rpx;

      .badge {
        top: 12rpx;
        right: 0rpx;
      }
    }
  }
}


.dingdan {
  width: 674rpx;
  // height: 245rpx;
  border-radius: 12rpx;
  background: #fff;

  .dingdan-title {
    letter-spacing: 2rpx;

    &::before {
      content: '';
      position: absolute;
      left: -12rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 4rpx;
      height: 28rpx;
      border-radius: 13rpx;
      background: #840202;
      border-radius: 13rpx;
    }
  }

  .badge {
    top: -8rpx;
    right: -8rpx;
  }
}

.texttile {
  width: 112rpx;
}
</style>
